<template>
	<view class="">

		<view class="font">
			<!-- <view class="Basics Basicsred ">
				<view class="louis-center">
					Flex布局
				</view>
			</view> -->
			<!-- louis-center -->
			<view style="padding: 10rpx 0rpx;" class="Basics  louis-center Basicsrblue">
				<view class="louis-center ">
					<text>class="louis-(w/h)-{size}p"</text>
				</view>
			</view>


			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsred">

				<view class="">
					单位p为百分比,size最大值为100p
				</view>


			</view>


			<view :key="Basicsclass" v-for="(Basicsclass,i) in maglist" class="Basics ">
				<view class="louis-space-between">
					<view class="louis-felx-1">
						<view v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass]" class="colorblock">
						</view>
					</view>
					<view>
						{{Basicsclass}}
					</view>
				</view>
			</view>

			<!-- <view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue">
				<view class="louis-center ">
					<text>
						class="louis-(max/min)-(w/h)-{size}"
					</text>
				</view>
			</view> -->
			<view style="padding: 10rpx 0rpx;" class="louis-font-center Basics Basicsred">



				<view class="">
					<text>
						max在(w/h)前面为最大值，在(w/h)后面为100%
					</text>
				</view>
			</view>

			<view v-for="(Basicsclass,i) in Abbreviationlist" :key="Basicsclass" class="Basics ">
				<view class="louis-space-between">
					<view class="louis-p-lr-30 louis-felx-1">
						<view style="line-height: 0rpx;" v-for="(item,index) in mincolorlist" :key="index" :class="['louis-bg-'+item.color,Basicsclass]"
						 v-if="index==0" class="colorblock">

						</view>
					</view>
					<view class="louis-p-lf-10">
						{{Basicsclass}}
					</view>
				</view>
			</view>










			<view class="coloritem">
				<view class="font">
					<view class="Basics Basicsred louis-center">
						Vue可使用组件的方式实现自定义尺寸
					</view>
					<view style="padding: 10rpx 0rpx;" class="Basics Basicsrblue louis-center">
						<view class="louis-center louis-font-pixel">
							<text>{{louisview}}</text>
						</view>
					</view>












					<view class="Basics ">
						<view class="louis-space-between ">
							<view class="louis-felx-1">

								<louis-view class="louis-bg-D colorblock louis-inline-block" w='200rpx' h='50rpx'>


								</louis-view>
							</view>
							<view class="louis-line-height-40rpx">
								w='200rpx' h='200rpx'
							</view>
						</view>
					</view>

					<view class="Basics ">
						<view class="louis-space-between ">
							<view class="louis-felx-1">

								<louis-view class="louis-bg-D louis-font-center colorblock louis-inline-block" minW='200rpx' minH='50rpx'>

									
								</louis-view>
							</view>
							<view class="louis-p-t-10">
								minW='200rpx' minH='50rpx'
							</view>
						</view>
					</view>
					
					
					
					
					<view class="Basics ">
						<view class="louis-space-between ">
							<view class="louis-felx-1">
					
								<louis-view class="louis-wh-max louis-bg-D louis-font-center colorblock louis-inline-block" maxW='200rpx' maxH='50rpx'>
					
									
								</louis-view>
							</view>
							<view class="louis-line-height-40rpx  louis-p-t-10">
								maxW='200rpx' maxH='50rpx'
							</view>
							
							
						</view>
					</view>
					






					<view class="Basics ">




						<louis-view style="margin: 10rpx 20rpx;" class="louis-radius-10rpx" color='#ddd'>

							<view class="louis-padding-10rpx">
								{{louisitem}}标签,注意大小写
							</view>
							<view class="louis-padding-10rpx">
								传参:w,h,maxH,maxW,minH,minW)支持任何单位
							</view>
							
							
						</louis-view>

					</view>

				</view>
			</view>



















		</view>





		 <louis-view p="20rpx">
			
		</louis-view>

	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				louisitem: '<louis-view>',
				louisview: "<louis-view width='50rpx' height='50rpx'   ></view>",
				maglist: [
					"louis-w-40p",
					"louis-w-95p",
					"louis-h-40p",
					"louis-h-100p",
					"louis-wh-80p",
				],
				Abbreviationlist: [
					"louis-max-w-50p",
					"louis-min-w-50p",
					"louis-w-max",
					"louis-h-max",
					"louis-wh-max"

				],
				mincolorlist: [

					{
						color: "P",
						name: "普通",
						hex: "#409EFF"
					},
					// {
					// 	color: "S",
					// 	name: "成功",
					// 	hex: "#67C23A"
					// },
					// {
					// 	color: "D",
					// 	name: "危险",
					// 	hex: "#F56C6C"
					// }

				],
			};
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.Fonttextbox {
		// height: 4000rpx;
		overflow: hidden;

	}

	.Fonttext {
		// -webkit-text-stroke: 1px #6893a0;
		position: absolute;
		z-index: 200;
		color: rgba(255, 255, 255, 0.7);
		width: 100%;
		height: 100%;
		top: 42rpx;
		right: 0rpx;
		width: 200rpx;
		font-size: 45rpx;
		// transform:skewX(23deg);
		// color: #db79a5;
		font-weight: bold;
		opacity: 0.8;
	}

	.Basics {
		color: #FFF;
		font-size: 25rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		border: 2px solid #C0C0C0;

		background-color: rgba(29, 5, 41, 0.2);
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		// &:active {
		// 	background-color: rgba(206, 31, 84, 0.8);
		// }
	}

	.Basicsred {
		background-color: rgba(206, 31, 84, 0.5);
	}

	.Basicsrblue {
		background-color: rgba(64, 158, 255, 0.5);
	}

	.font {
		margin-top: 20rpx;
	}

	.coloritem {
		position: relative;
		// top: -50rpx;
	}

	.colorblock {
		//             min-width: 30rpx;
		// min-height: 30rpx;
		// font-size: 25rpx;
		display: inline-block;
		margin-left: 7rpx;
		// margin-top: 10rpx;
		// width: 130rpx;
		// height: 130rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.colorblock:nth-child(5n) {
		margin-right: 0rpx;
	}

	#F {
		color: #000000
	}

	.louis-bg-MD {
		// background-color: rgba(0,0,0,0.1);
		display: inline-block;
		padding: 5rpx 10rpx;


	}
</style>
